<template>
     <div class="message_info">
            <div class="message_title">
              <img src="../assets/images/right_arrow.png" />
              <span>近半年举报数量走势图</span>
            </div>
            <div class="message_content" style="height:280px;margin-top:-20px" id="reportAmount">

            </div>

          </div>
</template>
<script>
import echarts from 'echarts'
export default {
   data(){
       return{
option:{
color: ['#0FE589', '#31AAF5'],
tooltip: {
          trigger: "axis",
        },
        legend: {
          // 禁止点击
          // selectedMode: false,
          // 文字颜色设置为 白色
          textStyle: {
            color: '#fff'
          },

          data: [
            {
              //设置图标为方框
              icon: 'rect',
              name: '网络'
            },
            {
              icon: 'rect',
              name: '二维码'
            }],
          right: 30,
          top: 20,
        },

        xAxis: {
          type: 'category',
         
          data: [],
          // 设置x轴样式
          axisLine: {
            lineStyle: {
              color: '#0A46F2', // 颜色
              width: 2 // 粗细
            }
          }
        },
        yAxis: {
          type: 'value',
          // 设置网格线样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#0A46F2'],
              width: 1,
              type: 'solid'
            }
          },
          // 设置 y轴样式
          axisLine: {
            lineStyle: {
              color: '#0A46F2', // 颜色
              width: 2 // 粗细
            }
          }
        },
        series: [{
          name: '网络',
          type: 'line',
          areaStyle: {},
          data: []
        },
        {
          name: '二维码',
          type: 'line',
          areaStyle: {},
          data: []
        }]
},
       };
   } ,
   mounted() {
      // 近半年举报数量走势图
var myChart2 = echarts.init(document.getElementById('reportAmount'));
  this.Api.complainCurveDiagram().then((res)=>{
  
    res.data.forEach(res => {
      this.option.xAxis.data.push(res.dateTimeX)
      this.option.series[0].data.push(res.webPageY)
       this.option.series[1].data.push(res.qrCodeY)
    });
   
      myChart2.setOption(this.option); 
  })
   // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(this.option); 
   },

}
</script>

<style lang="less" scoped>
    .message_info {
      width: 452px;
      margin: 24px 30px;
      height: 295px;


    } 
      .message_title {
      padding: 6px 0;
      width: 100%;
      height: 45px;
      font-size: 28px;
      font-weight: 500;
      color: #06FFFF;
      line-height: 45px;
    }

    .message_title img {
      height: 24px;
      width: 24px;
    }

    .message_content {
      margin-top: 10px;
    }
</style>